import React, { Component } from 'react';
import './Sortlist.scss'
import { category_list, category_subcate } from '../../utils/api'
import { SideBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

class Sortlist extends Component {
    constructor(props) {
        super(props);

        this.state = {
            list: [],//一级分类
            subcate: {},//二三级分类，及轮播图
            listid: ''
        }
    }

    componentDidMount() {
        // 一级分类
        category_list().then((res) => {
            this.setState([
                this.state.list = res.data.list,
                this.state.listid = this.state.list[0].id
            ], () => {
                category_subcate({ id: this.state.listid }).then((res) => {
                    this.setState(
                        this.state.subcate = res.data.subcate
                    )
                })
            })
        })
    }


    // 二三级分类
    handleChange = (key) => {
        category_subcate({ id: key }).then((res) => {
            console.log(res.data);
            this.setState(
                this.state.subcate
                = res.data.subcate
            )
        })
    }

    //跳转到所有商品页面
    toAllgood(id) {
        console.log(id);
        this.props.history.push({ pathname: '/index/allgood', state: { id } })
    }

    render() {
        return (
            <div className='cate'>
                {/* 借助SideBar组件渲染左侧一级分类, 一个SideBar.Item就是一个一级分类 */}
                <SideBar onChange={this.handleChange}>
                    {
                        //渲染一级分类列表
                        this.state.list.map(item => (
                            <SideBar.Item key={item.id} title={item.name} />
                        ))
                    }
                </SideBar>

                {/* right */}
                <div className="subcate">
                    {
                        //渲染二级分类列表

                        //判断是否请求到二三级分类数据,请求到数据再执行 xxx.map 渲染, 否则不执行, 这样可以避免组件初次渲染报错.
                        this.state.subcate.subcategory &&
                        this.state.subcate.subcategory.map((item2, index) => {
                            return (
                                <div className="cate2" key={index}>
                                    <div className="name">{item2.name}</div>
                                    <div className="list">
                                        {
                                            // 渲染三级分类列表
                                            item2.subNavs.map((item3, index) => {
                                                return (
                                                    <div onClick={() => { this.toAllgood(item3.id) }} className="cate3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="text">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Sortlist);